<template>
  <div class="drug-detail-shipping">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>订单详情-待发货</h2>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <div class="search-row">
        <div class="search-item">
          <label>订单号/用户ID：</label>
          <input 
            v-model="searchFilter.keyword" 
            type="text" 
            placeholder="请输入订单号或用户ID"
            class="search-input"
          />
        </div>
        <div class="search-item">
          <label>下单时间：</label>
          <input 
            v-model="searchFilter.startDate" 
            type="date" 
            class="date-input"
          />
          <span class="date-separator">至</span>
          <input 
            v-model="searchFilter.endDate" 
            type="date" 
            class="date-input"
          />
        </div>
        <button @click="applySearch" class="search-button">搜索</button>
        <button @click="resetSearch" class="reset-button">重置</button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>订单号</th>
            <th>用户ID</th>
            <th>订单金额</th>
            <th>支付金额</th>
            <th>支付方式</th>
            <th>配送地址</th>
            <th>下单时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in filteredOrders" :key="order.id">
            <td>{{ order.orderNo }}</td>
            <td>{{ order.userId }}</td>
            <td>¥{{ order.totalAmount }}</td>
            <td>¥{{ order.actualAmount }}</td>
            <td>{{ getPaymentMethodText(order.paymentMethod) }}</td>
            <td>{{ order.deliveryAddress }}</td>
            <td>{{ formatDateTime(order.createdAt) }}</td>
            <td>
              <button 
                @click="processShipping(order.id)" 
                class="action-button"
              >
                发货
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button 
        @click="changePage(currentPage - 1)" 
        :disabled="currentPage === 1"
        class="page-button"
      >
        上一页
      </button>
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页
      </span>
      <button 
        @click="changePage(currentPage + 1)" 
        :disabled="currentPage === totalPages"
        class="page-button"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';

// 搜索筛选条件
const searchFilter = reactive({
  keyword: '',
  startDate: '',
  endDate: ''
});

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalRecords = ref(0);

// 模拟数据 - 只包含待发货状态的订单
const orderData = ref([
  {
    id: 1,
    orderNo: 'DR20241201001',
    userId: 1001,
    totalAmount: 299.00,
    actualAmount: 299.00,
    paymentMethod: 'wechat',
    deliveryAddress: '北京市朝阳区建国路88号',
    createdAt: '2024-12-01 10:30:00'
  },
  {
    id: 3,
    orderNo: 'DR20241201003',
    userId: 1003,
    totalAmount: 89.00,
    actualAmount: 89.00,
    paymentMethod: 'bank_card',
    deliveryAddress: '上海市浦东新区陆家嘴金融中心',
    createdAt: '2024-12-01 16:45:00'
  },
  {
    id: 5,
    orderNo: 'DR20241201005',
    userId: 1005,
    totalAmount: 199.00,
    actualAmount: 199.00,
    paymentMethod: 'alipay',
    deliveryAddress: '广州市天河区珠江新城',
    createdAt: '2024-12-01 11:30:00'
  },
  {
    id: 6,
    orderNo: 'DR20241201006',
    userId: 1006,
    totalAmount: 356.00,
    actualAmount: 356.00,
    paymentMethod: 'wechat',
    deliveryAddress: '深圳市南山区科技园',
    createdAt: '2024-12-01 13:20:00'
  },
  {
    id: 7,
    orderNo: 'DR20241201007',
    userId: 1007,
    totalAmount: 128.50,
    actualAmount: 128.50,
    paymentMethod: 'alipay',
    deliveryAddress: '杭州市西湖区文三路',
    createdAt: '2024-12-01 15:10:00'
  }
]);

// 计算属性
const filteredOrders = computed(() => {
  let filtered = orderData.value;

  // 关键词搜索
  if (searchFilter.keyword) {
    filtered = filtered.filter(order => 
      order.orderNo.includes(searchFilter.keyword) || 
      order.userId.toString().includes(searchFilter.keyword)
    );
  }

  // 日期筛选
  if (searchFilter.startDate) {
    filtered = filtered.filter(order => 
      new Date(order.createdAt) >= new Date(searchFilter.startDate)
    );
  }
  if (searchFilter.endDate) {
    filtered = filtered.filter(order => 
      new Date(order.createdAt) <= new Date(searchFilter.endDate)
    );
  }

  return filtered;
});

const totalPages = computed(() => {
  return Math.ceil(filteredOrders.value.length / pageSize.value);
});

// 方法
const applySearch = () => {
  currentPage.value = 1;
};

const resetSearch = () => {
  searchFilter.keyword = '';
  searchFilter.startDate = '';
  searchFilter.endDate = '';
  currentPage.value = 1;
};

const getPaymentMethodText = (method: string) => {
  const methodTexts = {
    'wechat': '微信支付',
    'alipay': '支付宝',
    'bank_card': '银行卡'
  };
  return methodTexts[method as keyof typeof methodTexts] || method;
};

const formatDateTime = (dateTime: string) => {
  return new Date(dateTime).toLocaleString('zh-CN');
};

const processShipping = (orderId: number) => {
  // 处理发货逻辑
  alert(`订单 ${orderId} 已发货`);
  // 这里可以调用API更新订单状态
};

const changePage = (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  }
};

onMounted(() => {
  totalRecords.value = orderData.value.length;
});
</script>

<style scoped>
.drug-detail-shipping {
  padding: 60px 80px 60px 120px;
  min-height: 100vh;
  background-color: white;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.search-section {
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 25px;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item label {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

.search-input {
  padding: 10px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  width: 200px;
}

.date-input {
  padding: 10px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  width: 150px;
}

.date-separator {
  color: #666;
  margin: 0 5px;
}

.search-button, .reset-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.search-button {
  background-color: #1890ff;
  color: white;
}

.search-button:hover {
  background-color: #40a9ff;
}

.reset-button {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

.reset-button:hover {
  background-color: #e6e6e6;
}

.table-container {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background-color: #fafafa;
  padding: 15px 12px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

.data-table td {
  padding: 15px 12px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.data-table tr:hover {
  background-color: #fafafa;
}

.action-button {
  padding: 6px 12px;
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #73d13d;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.page-button {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  background-color: white;
  color: #666;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-button:hover:not(:disabled) {
  border-color: #1890ff;
  color: #1890ff;
}

.page-button:disabled {
  background-color: #f5f5f5;
  color: #bfbfbf;
  cursor: not-allowed;
}

.page-info {
  color: #666;
  font-size: 14px;
}
</style> 